<template>
  <div class="permission">
    <!-- 树形表格 -->
    <el-table class="table" 
      :data="permissionArr"
      row-key="id"
      border
    >
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="修改时间" prop='updateTime'></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button size="small" type="primary" :disabled="row.level == 4" @click="addPermission(row)">{{ row.level ==3?'添加功能':'添加菜单' }}</el-button>
          <el-button size="small" type="warning" :disabled="row.level==1" @click="updatePermission(row)">编辑</el-button>
          <el-popconfirm @confirm="deleteMenu(row)" :title="`你确定要删除${row.name}吗?`" width="200">
              <template #reference>
                <el-button size="small" type="danger" :disabled="row.level==1">删除</el-button>
              </template>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加编辑菜单 -->
    <el-dialog
      v-model="dialogVisible"
      :title="menuData.id?'更新菜单':'添加菜单'"
      width="450"
    >
      <!-- 表单组件 -->
      <el-form label-width="80">
        <el-form-item label="名称">
          <el-input v-model="menuData.name" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="权限值">
          <el-input v-model="menuData.code" placeholder="请输入权限值"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { reqRemoveMenu, reqAddOrUpdateMenu, reqAllPermission } from '@/api/acl/menu'
import type { MenuParams, Permission, PermissionList } from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus';




// 获取菜单和按钮
const permissionArr = ref<PermissionList>([])
const getHasPermissioin = async () => {
  const res = await reqAllPermission()
  if(res.code == 200) {
    permissionArr.value = res.data
  }
}

// 添加修改dialog
const dialogVisible = ref(false)
const menuData = reactive<MenuParams>({
  code: '',
  level: 0,
  name: '',
  pid: 0 // 
})

const addPermission = (row: Permission) => {
  // 清空数据
  if(menuData.id) {
    delete menuData.id
  }
  Object.assign(menuData, {
    code: '',
    level: 0,
    name: '',
    pid: 0 // 
  })
  dialogVisible.value = true
  // 收集新增菜单数据
  menuData.level = row.level + 1
  menuData.pid = row.id as number
} 

const updatePermission = (row: Permission) => {
  Object.assign(menuData, row)
  dialogVisible.value = true
} 

// 保存新增或修改的菜单回调
const save = async () => {
  const res = await reqAddOrUpdateMenu(menuData)
  if(res.code == 200) {
    dialogVisible.value = false
    ElMessage({
      type: 'success',
      message: menuData.id?'更新成功~':'添加成功~'
    })
    getHasPermissioin()
  } else {
    dialogVisible.value = false
    ElMessage({
      type: 'error',
      message: menuData.id?'更新失败~':'添加失败~'
    })
  }
}

// 删除菜单
const deleteMenu = async (row:Permission) => {
  const res = await reqRemoveMenu(row.id as number)
  if(res.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功~'
    })
    getHasPermissioin()
  } else {
    ElMessage({
      type: 'error',
      message:'删除成功~'
    })
  }
}


onMounted(()=>{
  getHasPermissioin()
})


</script>

<style lang="scss" scoped>
  .permission {
    .table {
      width: 100%;
      margin-bottom:20px;
    }
  } 
</style>
